<template>
  <div id='gamecoin_list'>
    <div class="search-box">
      <Row type="flex" align='middle' style="padding-top: 24px;">
        <Col style="width: 8px ;height: 20px;background: #2D8CF0;" class="search-item"></Col>
        <Col style="margin-left: 10px">
          <h3>{{this.$route.query.shopName}}</h3>
        </Col>
      </Row>
      <Row type="flex">
        <Row type="flex" justify="start" class="search-item-left">
          <Col class="search-item">
            <span class="search-label">销售渠道：</span>
            <Select v-model="saleType" @on-change="doSearch" style="width:180px" placeholder='请选择'>
              <Option v-for="item in saleList" :value="String(item.number)" :key="item.value">{{ item.name }}</Option>
            </Select>
          </Col>
          <Col class="search-item">
            <span class="search-label">状态：</span>
            <Select v-model="status" @on-change="doSearch" style="width:180px" placeholder='请选择'>
              <Option v-for="item in statusList" :value="item.value" :key="item.value">{{ item.label }}</Option>
            </Select>
          </Col>
          <Col class="search-item">
            <span class="search-label">商品标题：</span>
            <Input placeholder="请输入" v-model='searchName'></Input>
          </Col>
          <Col class="search-item">
            <Button class="search-btn" type='primary' @click="doSearch">查询</Button>
          </Col>
          <Col class="search-item">
            <Button class="search-btn" @click="reset">重置</Button>
          </Col>
        </Row>
        <Row type="flex" justify="end" class="search-item-right">
          <Col class="search-item">
            <Button class="search-btn" style="margin-right:8px;width: 120px" @click='displayDraw' v-if="hasPermission('moms:product:shopcoinsortsetting')">显示排序设置</Button>
          </Col>
        </Row>
        </Row>
      </Row>
    </div>
    <Table stripe class="table-list" :columns="columns" :data="tableData" :loading="loading" :height="tableHeight">
      <template slot-scope="{ row }" slot="channelId">
        <span>{{row.channelId === '1' ? '收银台' : row.channelId === '2' ? '一体机' : row.channelId === '4' ? '微信商城' :row.channelId === '8' ? '移动设备' : '' }}</span>
      </template>
      <template slot-scope="{ row }" slot="time">
        <span>{{row.listingAt + '至' + row.delistingAt}}</span>
      </template>
      <template slot-scope="{ row }" slot="standardPrice">
        <span v-if='row.goodsPrices.length>0'>{{row.goodsPrices[0].amount.toFixed(2)}}</span>
      </template>
      <template slot-scope="{ row }" slot="inventory">
        <span>{{row.inventory  === -1 ? '不限制' : row.inventory}}</span>
      </template>
      <template slot-scope="{ row }" slot="status">
        <i-switch size="large" v-model='row.isShow' @on-change='changeStatus(row)' :disabled="!hasPermission('moms:product:shopcoinvisiblesetting')">
          <span slot="open">显示</span>
          <span slot="close">隐藏</span>
        </i-switch>
      </template>
      <template slot-scope="{ row }" slot="action">
        <i class="iconsys icondetail" title="查看" @click='skipDetail(row)' v-if="hasPermission('moms:product:shopcoindetail')"></i>
      </template>
    </Table>
    <Row type='flex' justify="end" style='padding: 20px'>
      <Col>
        <Page :total="pageObj.total"
              :page-size='pageObj.pageSize'
              :current='pageObj.pageIndex'
              :page-size-opts='[20,50,100,200]'
              show-total
              show-sizer
              @on-change='changePageIndex'
              @on-page-size-change='changePageSize' />
      </Col>
    </Row>
    <display-order v-model="drawShow" :value='drawShow' :transmit='transmit' :saleType='channelType' @changeChannnelType='changeChannnelType' @closeDraw='closeDraw' @sureSelect='sureSelect'></display-order>
  </div>
</template>

<script>
import { mapState } from 'vuex'
import DisplayOrder from '@/view/components/display-order/index.vue'
import { getChannelList, getGoodsList, getIsShow } from '@/api/commondity/index'
export default {
  name: 'gamecoin_list',
  components: { DisplayOrder },
  computed: {
    ...mapState({
      merchantId: state => state.user.merchantId,
      userId: state => state.user.userId,
      userName: state => state.user.userName
    }),
    tableHeight () {
      let height = this.tableData.length > 10 ? 520 : 0
      return height
    }
  },
  beforeRouteEnter (to, from, next) {
    next(vm => {
      if (vm.shopId !== to.params.id) {
        vm.shopId = to.params.id
        vm.transmit.shopId = to.params.id
        vm.reset()
      }
    })
  },
  data () {
    return {
      shopId: '',
      channelType: '',
      loading: false,
      drawShow: false,
      pageObj: {
        searchName: '',
        total: 0,
        pageIndex: 1,
        pageSize: 20
      },
      saleType: '2',
      transmit: {
        goodsKind: '01',
        type: '1',
        shopId: this.$route.params.id
      },
      saleList: [],
      statusList: [
        { value: '1', label: '已显示' },
        { value: '0', label: '已隐藏' }
      ],
      status: '1',
      searchName: '',
      tableData: [],
      columns: [
        // {
        //   type: 'selection',
        //   width: 60
        // },
        {
          title: '商品标题',
          key: 'title'
        },
        {
          title: '游戏币分类',
          key: 'goodsTypeName'
        },
        {
          title: '销售渠道',
          slot: 'channelId'
        },
        {
          title: '平台价(元)',
          slot: 'standardPrice'
        },
        {
          title: '可售库存',
          slot: 'inventory'
        },
        {
          title: '上下架时间',
          slot: 'time'
        },
        {
          title: '状态',
          slot: 'status'
        },
        {
          title: '操作时间',
          key: 'operatedAt'
        }
        // {
        //   title: '操作',
        //   slot: 'action'
        // }
      ]
    }
  },
  methods: {
    doSearch () {
      this.pageObj.pageIndex = 1
      this.pageObj.searchName = this.searchName
      this.getData()
    },
    reset () {
      this.saleType = '2'
      this.status = '1'
      this.searchName = ''
      this.pageObj.searchName = ''
      this.pageObj.pageIndex = 1
      this.pageObj.pageSize = 20
      this.getData()
    },
    changePageIndex (index) {
      this.pageObj.pageIndex = index
      this.getData()
    },
    changePageSize (size) {
      this.pageObj.pageSize = size
      this.pageObj.pageIndex = 1
      this.getData()
    },
    skipDetail (row) {
      this.$router.push({ name: 'gamecoin_detail', params: { id: row.channelGoodsId } })
    },
    sureSelect (data) {
      if (data) {
        this.getData()
      }
    },
    changeChannnelType (data) {
      this.channelType = data
    },
    displayDraw () {
      this.drawShow = true
      this.channelType = this.saleType
    },
    closeDraw (data) {
      this.drawShow = data
      this.channelType = ''
    },
    // 获取渠道
    getChannel () {
      getChannelList().then(res => {
        const result = res.data || {}
        if (result.status === 200) {
          this.saleList = result.data
        } else {
          this.$Message.error(`${result.error}`)
        }
      }).catch(err => {
        this.$Message.error(`${err}`)
      })
    },
    changeStatus (row) {
      this.getStatus(row)
    },
    // 显示与隐藏
    getStatus (data) {
      getIsShow({
        merchantId: this.merchantId,
        channelGoodsId: data.channelGoodsId,
        updater: this.userId,
        updaterName: this.userName,
        showType: data.isShow ? 1 : 0
      }).then(res => {
        const result = res.data || {}
        if (result.status === 200) {
          this.$Message.success('更新成功！')
        } else {
          this.$Message.error(`${result.error}`)
        }
        this.getData()
      }).catch(err => {
        this.$Message.error(`${err}`)
      })
    },
    getData () {
      this.loading = true
      getGoodsList({
        merchantId: this.$store.state.user.merchantId,
        channelGoodsStatus: 1,
        channelId: this.saleType,
        isShow: this.status,
        title: this.pageObj.searchName,
        shopId: this.$route.params.id,
        goodsKind: '01',
        offset: this.pageObj.pageSize * (this.pageObj.pageIndex - 1),
        limit: this.pageObj.pageSize,
        sortBy: 'sortNo'
      }).then(res => {
        this.loading = false
        const result = res.data || {}
        if (result.status === 200) {
          this.tableData = result.data.goods || []
          this.pageObj.total = result.data.total
          if (this.tableData.length > 0) {
            this.tableData.forEach(ele => {
              ele.goodsTypeName = []
              ele.isShow = !!Number(ele.isShow)
              if (ele.goodsKindList.length > 0) {
                ele.goodsKindList.forEach(item => {
                  ele.goodsTypeName.push(item.typeName)
                })
              }
              ele.goodsTypeName = ele.goodsTypeName.join('-')
            })
          }
        } else {
          this.$Message.error(`${result.error}`)
        }
      })
    }
  },
  mounted () {
    this.shopId = this.$route.params.id
    this.getChannel()
    this.getData()
    if (this.hasPermission('moms:product:shopcoindetail')) {
      this.columns.push({
        title: '操作',
        slot: 'action',
        width: 120
      })
    }
  }
}
</script>
